<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>javascript技术分享</title>
</head>

<body>
  <div id="app">
    <!-- 首次加载，文件未下载完成时显示一个loading -->
    <style>
      .el-loading-mask {
        position: absolute;
        z-index: 2000;
        background-color: ■hsla(0, 0, 100%, ・9);
        margin: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: opacity .3s;
      }

      .el-loading-spinner {
        top: 50%;
        margin-top: -21px;
        width: 100%;
        text-align: center;
        position: absolute;
      }

      .el-loading-spinner .circular {
        height: 42px;
        width: 42px;
        animation: loding-rotate 2s linear infinite;
      }

      .el-loading-spinner .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: #409eff;
        stroke-linecap: round;
      }

      @keyframes loading-rotate {
        100% {
          transform: rotate (1turn);
        }
      }

      @keyframes loading-dash {
        0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -40px;
        }

        100% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -120px;
        }
      }
    </style>
    <div class="el-loading-mask">
      <div class="el-loading-spinner">
        <svg class="circular" viewBox="0 0 50 50">
          <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
        </svg>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://source.dsiab.com/plugins/webstatistics.js"></script>
</body>

</html>